<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<title>个人资料</title>
		<style>
			.hang{display: flex;height:49px;border-bottom:1px solid #DCDCDC;
			padding:0 5px;}body,.mui-content{background: #fff;}
			.info{width: 100%;padding:0 5%;}
			.left-item,.right-item{line-height: 49px;}
			.left-item{color: #2B333A;font-size: 12px;width:40%;}
			.right-item{width:90%; position: relative;overflow: hidden;}
			.right-item::before{content: "\e583";float:right;font-size: 12px;color: #D5D8DB;}
			.right-item img{width: 38px;height: 38px;border-radius: 50%;
			position: absolute;right:20px;top:6px;}
			.right-item input{-webkit-user-select:text !important;padding-right: 1%;}
			.right-item input,.right-item p{background:none;border:none;text-align: right;color:#333;display: inline-block;
			float:right;height:49px;width:88%;font-size: 13px;}
			.p-btn{width: 88%;text-align: center;background:#275EB1;color: #fff;
			font-size: 18px;line-height: 40px;height: 40px;margin:50px 6%;border-radius: 5px;}
			.mui-input-row .mui-input-clear~.mui-icon-clear{top:14px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户设置</h1>
		</header>
		<div style="height:3vh;width:100%;"></div>
		<div class="mui-content" id="page">
			<div class="info">
				<div class="hang">
					<div class="left-item">
						头像
					</div>
					<div class="right-item mui-icon">
						<img src="../img/h.png">
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						登录名
					</div>
					<div class="right-item mui-icon mui-input-row">
						<input class="mui-input-clear" :value="user.userName" name="usernam1" disabled="disabled" />
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						姓名
					</div>
					<div class="right-item mui-icon mui-input-row">
						<input class="mui-input-clear" :value="user.compellation" name="usernam2" />
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						手机号
					</div>
					<div class="right-item mui-icon mui-input-row">
						<input class="mui-input-clear" :value="user.phone" name="usernam3" @click="modifyPhoneNumber" readonly="readonly"/>
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						性别
					</div>
					<div class="right-item mui-icon">
						<p v-if="user.sex==1">男</p>
						<p v-else>女</p>
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						所属单位
					</div>
					<div class="right-item mui-icon">
						<p>{{user.enterpriseName}}</p>
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						参与项目
					</div>
					<div class="right-item mui-icon">
						<p>{{user.currentProjectName}}</p>
					</div>
				</div>
				<!--
				<div class="hang">
					<div class="left-item">
						版本号
					</div>
					<div class="right-item mui-icon">
						<p><font color="red">◉ </font>2.1.8</p>
					</div>
				</div>
				
				<div class="hang">
					<div class="left-item">
						清除缓存
					</div>
					<div class="right-item mui-icon">
						<p>521M</p>
					</div>
				</div>
				-->
			</div>
			
			<!-- <div class="p-btn" @click="logout">退出登录</div> -->
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script src="../js/mkeyplus.base.js?1"></script>
		<script src="js/api.js"></script>
		<script>
			var htapi = new HTGlobal();
			mui.init();
			var page = new Vue({
				el:'#page',
				data:{
					user:{
						compellation:''
					}
				},
				created(){
					this.pload()
				},
				methods:{
					pload(){
						var user = localStorage.getItem('outUser');
						if(user){
							user = JSON.parse(user);
							this.$set(this.$data,'user',user)
						}
					},
					logout(){
						htapi.outsidersLogout()
					},
					modifyPhoneNumber(){
						/** 修改用户手机号
						 * @method modifyPhoneNumber
						 * @param{空}
						 * @return {空}
						*/
					   var _this = this
						mui.prompt('需要修改用户手机号码吗？',this.user.phone,'提示',['取消','确定'],function(res){
							if(res.index==1){
								//点击确定
								if(/^1[3456789]\d{9}$/.test(res.value)){
									plus.nativeUI.showWaiting('修改中');
									htapi.fetch({
										id:_this.user.id,
										phone:res.value
									},function(data){console.log(JSON.stringify(data))
									plus.nativeUI.closeWaiting();
									  if(data.code=='0'){
									    _this.$set(_this.user,'phone',res.value)
										localStorage.setItem('outUser',JSON.stringify(_this.user));
									  }else{
									    mui.toast(data.msg)
									  }
									  
									},false,'updateUserPhone')
								}else{
									mui.toast('输入的手机号码格式错误！')
									return false;
								}
							}
						},'div') 
					}
				}
			});
			
			var old_back = mui.back;
			mui.back = function(){
			mui.fire(plus.webview.currentWebview().opener(),'refresh')
			  old_back() 
			}	
		</script>
	</body>
</html>
